<template>
	<view>

		<view class="tab">
			<u-tabs bar-width="54" :list="list" :is-scroll="false" v-model="current" @change="change"></u-tabs>
		</view>
		<view class="time" v-if="current == 1">
			<view class="icon" @click="show = true">
				<u-icon name="clock" color="#a3a3a3" size="28"></u-icon>
			</view>
			<view class="time-r" @click="show = true" v-if="startTime || endTime">{{startTime}} — {{endTime}}</view>
			<view class="time-r" @click="show = true" v-else> 请选择时间范围</view>
		</view>
		<view class="order-list">
			<view class="list-item" v-for="item in orderList" :key="item.id">
				<OrderCard :current="current" :data="item" />
			</view>
		</view>

		<u-calendar @change="handelSelectTime" v-model="show" mode="range" safe-area-inset-bottom>
			<template v-slot:tooltip>
				<view class="title">
					订单开始时间-结束时间
				</view>
			</template>
		</u-calendar>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue';
	import OrderCard from '@/componnens/order-card.vue'
	import { postHttpsRequset } from '@/public-ts-file/request';
	import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'

	// 获取当月一号
	const getFirstDayOfMonthAsString = () => {
		// 获取当前日期  
		let now = new Date();
		// 设置日期为当月的第一天  
		now.setDate(1);
		// 获取年份  
		let year = now.getFullYear();
		// 获取月份，加1以转换为常规月份表示（1-12），并补零  
		let month = ("0" + (now.getMonth() + 1)).slice(-2);
		// 获取日期（已经是1号，直接补零）  
		let day = ("0" + now.getDate()).slice(-2);
		// 组合成 year-month-day 格式的字符串  
		return `${year}-${month}-${day}`;
	}

	// 获取当天
	const getCurrentDateAsString = () => {
		let now = new Date();
		let year = now.getFullYear();
		let month = ("0" + (now.getMonth() + 1)).slice(-2); // 月份加1，并补零  
		let day = ("0" + now.getDate()).slice(-2); // 日期补零  
		return `${year}-${month}-${day}`;
	}

	let show = ref(false)
	let list = ref([{
		name: '当日订单'
	}, {
		name: '历史订单'
	}])
	let page = ref(1)
	let pageSize = ref(10)

	const parms = reactive({
		path: '',
		methods: 'post',
		data: {
			date: [''],
			page: page.value,
			pageSize: pageSize.value
		}
	})
	let current = ref(0)
	let startTime = ref<string>(getFirstDayOfMonthAsString())
	let endTime = ref<string>(getCurrentDateAsString())
	const change = (index : number) => {
		init()
		if (index == 0) {
			parms.path = '/shop/Order/order_today'
			delete parms.data.date
			getOrderList()
		} else {
			parms.path = '/shop/Order/order_history'
			parms.data.date = [startTime.value, endTime.value]
			getOrderList()
		}
		current.value = index
	}

	// 请求订单列表
	let orderList = ref([])
	const getOrderList = async () => {
		const res = await postHttpsRequset(parms)
		if (res.code == 200) {
			if (res.data.data.length) {
				orderList.value = [...orderList.value, ...res.data.data]
			} else {
				uni.showToast({
					title: '没有更多了',
					icon: 'none'
				})
			}
		}
		console.log(orderList.value, 'orderList=======')
	}

	// 选择时间范围
	const handelSelectTime = (e) => {
		let { startDate, endDate } = e
		init()
		startTime.value = startDate
		endTime.value = endDate
		parms.path = '/shop/Order/order_history'
		parms.data.date = [startTime.value, endTime.value]
		getOrderList()
	}

	onReachBottom(() => {
		parms.data.page++
		getOrderList()
	})

	onPullDownRefresh(() => {
		init()
		getOrderList()
		uni.stopPullDownRefresh()
	})

	onShow(() => {
		current.value = 0
		init()
		parms.path = '/shop/Order/order_today'
		delete parms.data.date
		getOrderList()
	})

	const init = () => {
		orderList.value = []
		parms.data.page = 1
	}
</script>

<style lang="scss" scoped>
	:deep(.u-calendar__action) {
		display: flex;
		justify-content: center;
	}

	.title {
		display: flex;
		justify-content: center;
		padding: 20rpx 0 0 0;
		font-weight: 900;
	}

	.time {
		display: flex;
		align-items: center;
		padding-left: 40rpx;
		margin: 20rpx;

		.icon {
			margin-right: 14rpx;
		}

		.time-r {
			opacity: 1;
			/** 文本1 */
			font-size: 10px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 13.72px;
			color: rgba(153, 153, 153, 1);
		}
	}

	.order-list {
		padding: 30rpx;
	}
</style>